<template>
    <div class="machType">
        <div class="left">
            <div class="ipt">
                <Input search enter-button placeholder="请输入分类名称"  style="width:200px"  @on-search="searchAll" v-model="keyword" clearable />
            </div>
            <div class="ipt" style="border-bottom :none; height:50px;">
                <el-button type="primary"  @click="updateRow(0)"  size="small" plain>添加分类</el-button>
            </div>
            <ul>
                <li v-for="(item,index) in list" :key="index" @click="getDetail(item)" :class="machId == item.machTypeId?'active':''">
                    <span>{{item.name}}</span>
                    <div>
                        <i class="el-icon-edit-outline" @click="updateRow(1,item)" ></i>
                        <i class="el-icon-delete" @click="remove(item)" ></i>
                    </div>
                </li>
            </ul>
        </div>
        <div class="right">
            <div class="top">
                <div class="list">
                    <span>名称搜索:</span>
                    <Input v-model="machkeyword" placeholder="请输入类型名称" style="width:200px" maxlength="20" clearable/>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <div class="list">
                    <span>状态:</span>
                    <Select v-model="enable" style="width:150px" placeholder="请选择状态">
                        <Option v-for="item in enableList" :value="item.id" :key="item.id">{{item.name}}</Option>
                    </Select>
                </div>
                <div class="list">
                    <el-button type="primary" @click="machsearchAll" size="small" plain>搜索</el-button>
                    <el-button type="info" @click="machclear" style="margin-left:20px;" size="small" plain>重置</el-button>
                </div>
            </div>
            <div class="bottom">
                <div class="down">
                    <el-button :type="list.length == 0?'info':'primary'" @click="updateMachRow(0)" size="small" plain >添加类型</el-button>
                </div>
                <div class="table">
                    <el-table :data="machList" :height="tableHeight">
                        <el-table-column  label="类型图标" width="300px">
                            <template slot-scope="scope">
                                <img :src="item.icon" alt="" v-for="(item,index) in scope.row.icons" :key="index" style="display:inline-block;width:60px;height:60px">
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="类型名称"></el-table-column>
                        <el-table-column prop="code" label="类型编码"></el-table-column>
                        
                        <el-table-column  label="状态">
                            <template slot-scope="scope">
                                <el-tag type="success" v-if="scope.row.state == 0" size="small">启用</el-tag>
                                <el-tag type="info" v-if="scope.row.state == 1" size="small">禁用</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作">
                            <template slot-scope="scope">
                                <el-button  @click.native.prevent="updateMachRow(1,scope.$index, machList)" type="text" size="small">编辑</el-button>
                                <el-button v-if="scope.row.state == 1"  @click.native.prevent="enableRow(scope.$index, machList,0)" type="text" size="small">启用</el-button>
                                <el-button v-if="scope.row.state == 0"  @click.native.prevent="enableRow(scope.$index, machList,1)" type="text" size="small">禁用</el-button>
                                <el-button style="color:red" @click.native.prevent="removeRow(scope.$index, machList)" type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="clearfix" v-show="machList.length > 0">
                    <div class="float-right">
                        <Page v-if="totalCount" style="margin: 20px 0;text-align: center;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                    </div>
                </div>
            </div>
        </div>
                
        <!-- 添加编辑分类 -->
        <Modal v-model="updateModal" :title="isAdd?'添加分类':'编辑分类'" width="500px;" :mask-closable="false">
            <div class="item" >
                <span style="white-space: nowrap;">设备分类编码:</span>
                <Input v-model="code" placeholder="请输入设备分类编码" style="width: 300px" clearable/>
            </div>
            <div class="item">
                <span class="tip">*</span>
                <span style="white-space: nowrap;">设备分类名称:</span>
                <Input v-model="name" placeholder="请输入设备分类名称" style="width: 300px" clearable/>
            </div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small" plain>取消</el-button>
                <el-button @click="Sumbit" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <!-- 删除设备分类/类别 -->
        <Modal v-model="deleteModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(2)" type="info" size="small" plain>取消</el-button>
                <el-button @click="detele" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <!-- 添加编辑类别 -->
        <Modal v-model="updateMachModal" :title="isAdd?'添加类别':'编辑类别'" width="500px;" :mask-closable="false">
            <div class="item" >
                <span class="tip">*</span>
                <span>设备类型编码:</span>
                <Input v-model="machCode" placeholder="请输入设备分类编码" style="width: 300px" clearable/>
            </div>
            <div class="item">
                <span class="tip">*</span>
                <span>设备类型名称:</span>
                <Input v-model="machName" placeholder="请输入设备分类名称" style="width: 300px" clearable/>
            </div>
            <div class="item">
                <span>设备类型图标:</span>
                <div class="img">
                    <div>
                        <p>
                            <span v-if="iconList[0].icon ==''">+</span>
                            <input id="upload_certfile0" type="file" @change="getOneFile" accept=".png" style="position: absolute;left:0;top:0;height:60px;opacity: 0; width:60px; cursor: pointer;" />
                            <img :src="iconList[0].icon" alt=""   v-if="iconList[0].icon">
                        </p>
                        <span>灰色</span>
                    </div>
                    <div>
                        <p>
                            <span v-if="iconList[1].icon ==''">+</span>
                            <input id="upload_certfile1" type="file" @change="getTwoFile" accept=".png" style="position: absolute;left:0;top:0;height:60px;opacity: 0; width:60px; cursor: pointer;" />
                            <img :src="iconList[1].icon" alt=""  v-if="iconList[1].icon">
                        </p>
                        <span>蓝色</span>
                    </div>
                    <div>
                        <p>
                            <span v-if="iconList[2].icon ==''">+</span>
                            <input id="upload_certfile2" type="file" @change="getThreeFile" accept=".png" style="position: absolute;left:0;top:0;height:60px;opacity: 0; width:60px; cursor: pointer;" />
                            <img :src="iconList[2].icon" alt="" v-if="iconList[2].icon">
                        </p>
                        <span>红色</span>
                    </div>
                    <div>
                        <p>
                            <span v-if="iconList[3].icon ==''">+</span>
                            <input id="upload_certfile3" type="file" @change="getFourFile" accept=".png" style="position: absolute;left:0;top:0;height:60px;opacity: 0; width:60px; cursor: pointer;" />
                            <img :src="iconList[3].icon" alt="" v-if="iconList[3].icon">
                        </p>
                        <span>绿色</span>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(3)" type="info" size="small" plain>取消</el-button>
                <el-button @click="SumbitMach" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
    getMachTypeEdit_V1,
    getMachTypeAdd_V1,
    getMachTypeList_V1,
    getMachClassifyList_V1,
    getMachTypeDel_V1,
    getMachTypeEnable_V1,
    getMachClassifyAdd_V1,
    getMachClassifyEdit_V1,
} from "@/api/mach.js";
export default {
    data() {
        return {
            current: 1,
            pageSize: 10,
            pageNum: 1,
            list: [],
            totalCount: "",
            machList: [],
            keyword:"",
            machkeyword:"",
            enableList:[
                {
                    id:0,
                    name:"启用"
                },
                {
                    id:1,
                    name:"禁用"
                }
            ],
            enable:"",
            machId:"",
            machTypeId:"",
            deleteId:"",
            code:"",
            name:"",
            updateModal:false,
            isAdd:true,
            deleteModal:false,
            deleteMachModal:false,
            removeFlag:false,
            updateMachModal:false,
            machCode:"",
            machName:"",
            iconList:[
                {
                    state:0,
                    icon:"",
                    url:"",
                },
                {
                    state:1,
                    icon:"",
                    url:"",
                },
                {
                    state:2,
                    icon:"",
                    url:"",
                },
                {
                    state:3,
                    icon:"",
                    url:"",
                }
            ],
            tableHeight:window.innerHeight - 345,
        };
    },
    methods: {
        getBase64Image(img) {  
            console.log(img)
            var canvas = document.createElement("canvas");  
            canvas.width = img.width;  
            canvas.height = img.height;  
            var ctx = canvas.getContext("2d");  
            ctx.drawImage(img, 0, 0, img.width, img.height);  
            var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();  
            var dataURL = canvas.toDataURL("image/"+ext);  
            return dataURL;  
        }, 
        getOneFile(e){
            var file = document.getElementById("upload_certfile0").files[0];
            var image = new Image(); 
            image.src = window.URL.createObjectURL(file); 
            var _that = this;
            image.onload = function(){  
                _that.iconList[0].icon = _that.getBase64Image(image);
                _that.iconList[0].url = _that.getBase64Image(image).replace(/^data:image\/\w+;base64,/, "");;   
            }  
        },
        getTwoFile(e){
            var file = document.getElementById("upload_certfile1").files[0];
            var image = new Image(); 
            image.src = window.URL.createObjectURL(file); 
            var _that = this;
            image.onload = function(){  
                _that.iconList[1].icon = _that.getBase64Image(image); 
                _that.iconList[1].url = _that.getBase64Image(image).replace(/^data:image\/\w+;base64,/, "");;  
            } 
        },
        getThreeFile(e){
            var file = document.getElementById("upload_certfile2").files[0];
            var image = new Image(); 
            image.src = window.URL.createObjectURL(file); 
            var _that = this;
            image.onload = function(){  
                _that.iconList[2].icon = _that.getBase64Image(image);
                _that.iconList[2].url = _that.getBase64Image(image).replace(/^data:image\/\w+;base64,/, "");;   
            } 
        },
        getFourFile(e){
            var file = document.getElementById("upload_certfile3").files[0];
            var image = new Image(); 
            image.src = window.URL.createObjectURL(file); 
            var _that = this;
            image.onload = function(){  
                _that.iconList[3].icon = _that.getBase64Image(image);  
                _that.iconList[3].url = _that.getBase64Image(image).replace(/^data:image\/\w+;base64,/, "");; 
            } 
        },
        getList() {
            let params = {
                keyword:this.keyword,
            };
            getMachClassifyList_V1(params)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        if(this.list.length >0 ){
                            this.machId  =  this.list[0].machTypeId;
                            this.getMachList(this.machId);
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        updateRow(type, item) {
            if (type == 0) {
                this.isAdd = true;
                this.name = "";
                this.code = "";
            } else {
                this.name = item.name;
                this.machId = item.machTypeId;
                this.code = item.code; 
                this.isAdd = false;
            }
            this.updateModal = true;
        },
        Sumbit() {
            if (this.name == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "设备分类名称"
                });
                return;
            }
            if (this.isAdd) {
                let params = {
                    code: this.code,
                    name: this.name,
                };
                getMachClassifyAdd_V1(params)
                    .then(res => {
                        if (res.code == 200) {
                            this.$Message.success("操作成功");
                            this.updateModal = false;
                            this.getList();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            } else {
                let params = {
                    code: this.code,
                    name: this.name,
                    machTypeId:this.machId,
                };
                getMachClassifyEdit_V1(params)
                    .then(res => {
                        if (res.code == 200) {
                            this.$Message.success("操作成功");
                            this.updateModal = false;
                            this.getList();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },
        //删除分类
        remove(item) {
            this.deleteId = item.machTypeId;
            this.deleteModal = true;
            this.removeFlag = false;
        },
        //删除类型
        removeRow(index,rows){
            this.deleteId = [rows[index].machTypeId];
            this.deleteModal = true;
            this.removeFlag = true;
        },
        detele() {
            getMachTypeDel_V1(this.deleteId)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.deleteModal = false;
                        this.pageNum = 1;
                        this.current = 1;
                        if(this.removeFlag) {
                            this.getMachList(this.machId);
                        } else {
                           this.getList();
                        }
                        
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        searchAll(){
            this.getList();
        },
        pageChange(index) {
            this.pageNum = index;
            this.getMachList(this.machId);
        },
        pageSizeChange(index){
            this.pageSize = index; 
            this.getMachList(this.machId);
        },
        getMachList(id){
            let params = {
                pageSize:this.pageSize,
                machTypeId:id,
                pageNum:this.pageNum,
                keyword:this.machkeyword,
                state:this.enable,
            }
            getMachTypeList_V1(params)
                .then(res => {
                    if (res.code == 200) {
                        let list  = res.data.list;
                        list.forEach(v=>{
                            v.icons.forEach(item=>{
                                item.icon= `${item.icon}?${new Date().getTime()}`
                            })
                        })
                        this.machList = list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getDetail(item) {
            this.machId = item.machTypeId;
            this.getMachList(this.machId);
        },
        machsearchAll(){
            this.current = 1;
            this.pageNum = 1;
            this.getMachList(this.machId);
        },
        machclear(){
            this.machkeyword ="";
            this.enable = "";
            this.getMachList(this.machId);
        },
        updateMachRow(type,index,rows){
            this.iconList = [
                {
                    state:0,
                    icon:"",
                    url:"",
                },
                {
                    state:1,
                    icon:"",
                    url:"",
                },
                {
                    state:2,
                    icon:"",
                    url:"",
                },
                {
                    state:3,
                    icon:"",
                    url:"",
                }
            ];
            if(type == 0){
                this.isAdd = true;
                this.machName = "";
                this.machCode = "";
                
            } else if(type == 1) {
                this.isAdd = false;
                this.machTypeId = rows[index].machTypeId;
                this.machName = rows[index].name;
                this.machCode = rows[index].code
                rows[index].icons.forEach(i=>{

                })
                for (let i = 0; i < this.iconList.length ;i++) {
                    for(let j = 0; j <rows[index].icons.length; j++) {
                        if(this.iconList[i].state == rows[index].icons[j].state){
                            this.iconList[i].icon = rows[index].icons[j].icon;
                            this.iconList[i].url = rows[index].icons[j].icon;
                        }
                    } 
                }
            }
            this.updateMachModal =true;
        },
         
        SumbitMach(){
            if (this.machCode == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "设备类型编码"
                });
                return;
            }
            if (this.machName == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "设备类型名称"
                });
                return;
            }
            let icon = [];
            this.iconList.forEach(i=>{
                let obj = {
                    state:i.state,
                    icon :i.url,
                }
                icon.push(obj)
            })
            if(this.isAdd) {
                let params ={
                    code:this.machCode,
                    name:this.machName,
                    pid:this.machId,
                    icons:icon,
                }
                getMachTypeAdd_V1(params).then(res=>{
                    if(res.code == 200) {
                        this.$Message.success("操作成功");
                        this.updateMachModal = false;
                        this.pageNum = 1 ;
                        this.current = 1;
                        this.getMachList(this.machId)
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(error=>{
                    console.log(error)
                })
            } else {
                let params ={
                    code:this.machCode,
                    name:this.machName,
                    pid:this.machId,
                    icons:icon,
                    machTypeId:this.machTypeId,
                }
                getMachTypeEdit_V1(params).then(res=>{
                    if(res.code == 200) {
                        this.$Message.success("操作成功");
                        this.updateMachModal = false;
                        this.getMachList(this.machId)
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(error=>{
                    console.log(error)
                })
            }
        },
        enableRow(index,rows,type){
            let params = {
                machTypeId:rows[index].machTypeId,
                state:type,
            }
            getMachTypeEnable_V1(params).then(res=>{
                if (res.code == 200) {
                    this.$Message.success("操作成功");
                    this.getMachList(this.machId);
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        cancel(type) {
            if (type == 1) {
                this.updateModal = false;
            } else if (type == 2) {
                this.deleteModal = false;
            } else if (type == 3) {
                this.updateMachModal = false;
            } 
        }
    },
    mounted() {
        this.getList();
    }
};
</script>


<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
// @import "./../../assets/style/emp.less";
.machType {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    display: flex;
    .left{
        width: 250px;
        height: 100%;
        margin-right: 10px;
        background: #fff;
        border-radius: 10px;
        scrollbar-width: none;
        .ipt{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 70px;
            border-bottom: 1px solid #BFBFBF;
        }
        ul{
            width: 230px;
            margin:0 auto;
            // margin-top: 20px;
            height: calc(100% - 150px);
            overflow-y: scroll;
            list-style: none;
            overflow-y: scroll;
            li{
                width: 100%;
                height: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
                cursor: pointer;
                background: #f9f9f9;
                margin-bottom: 5px;
                span{
                    width: 180px;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                    margin-left: 10px;
                }
                div{
                    width: 50px;
                    margin-right: 10px;
                    display: flex;
                    justify-content: center;
                    i{
                        cursor: pointer;
                        margin-right: 10px;
                    }
                }
            }
            .active{
                background:var(--themeColor);
                color: #fff;
                .direction{
                    background: rgba(255, 255, 255, .4);
                }
            }
        }
        .tree{
            width: 250px;
            margin:0 auto;
            margin-top: 20px;
            height: calc(100% - 100px);
            overflow-y: scroll;
        }
        .tree::-webkit-scrollbar {
            display: none;
        }
        /*兼容火狐*/
        .tree {
            scrollbar-width: none;
        }
        /* 兼容IE10+ */
        .tree {
            -ms-overflow-style: none;
        }
        ul::-webkit-scrollbar {
            display: none;
        }
        /*兼容火狐*/
        ul {
            scrollbar-width: none;
        }
        /* 兼容IE10+ */
        ul {
            -ms-overflow-style: none;
        }
    }
    .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .top{
            width: 100%;
            height: 72px;
            padding: 0 20px;
            background: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            .list {
                display: flex;
                align-items: center;
                margin-right: 20px;
                span {
                    margin-right: 6px;
                }
            }
        }
        .bottom{
            width: 100%;
            height: calc(100% - 82px);
            padding: 20px;
            box-sizing: border-box;
            background: #fff;
            border-radius: 10px;
            .down {
                margin-bottom: 10px;
            }
        }
        
    }
}

.item {
    width: 420px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    position: relative;
    padding-left: 16px;
    box-sizing: border-box;
    .tip {
        position: absolute;
        top: 8px;
        left: 0;
        color: red;
        font-size: 16px;
    }
    .img{
        width: 300px;
        display: flex;
        justify-content: space-between;
        div{
            width: 60px;
            height: 80px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            p{
                width: 60px;
                height: 60px;
                border: 1px dashed #d9d9d9;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                img{
                    width: 60px;
                    height: 60px;
                }
                span{
                    position: absolute;
                    display: block;
                    width: 20px;
                    height: 20px;
                    top: 20px;
                    left: 20px;
                    font-size: 18px;
                    text-align: center;
                    line-height: 20px;
                }
            }
            span{
                height: 20px;
            }
        }

    }
}
/deep/.el-tag.el-tag--info{
     background-color:rgba(255, 72, 72, 0.1);
    border-radius:2px;
    border-color:#FF4848;
    color:#FF4848;
}
/deep/.el-tag.el-tag--success{
    background-color: rgba(63, 207, 119, 0.1);
    border-color:#28D79C;
    color: #3FCF77;
    border-radius:2px;
}
</style>
